import React, { useCallback, useEffect, useState } from 'react';
import { Select, Button, List, Modal, message } from 'antd';
import request from '@/utils/request'
import MainTitle from '@/components/MainTitle';
import './floorManage.scss';
const { Option } = Select;

export default function FloorManage(props) {
    //全部楼栋信息
    const [buildings, setBuildings] = useState([]);
    const getBuildings = useCallback(async () => {
        const { data } = await request.get('/building/getManageBuildings');
        setBuildings(data.data.buildings);
    }, []);
    // 获取数据下拉选择回调
    const handleChange = useCallback((_, key) => {
        setBtn({ disabled: false, id: key.key })
    }, []);
    //点击获取信息
    const [btn, setBtn] = useState({ disabled: true, id: '' });
    const getInfo = useCallback(() => {
        getFloors();
        getCleaners();
    })
    // 获取楼层信息
    const [floors, setFloors] = useState({});
    const getFloors = useCallback(async () => {
        const { data: floors } = await request.get('/floor/getFloorsDetail', { params: { buildingId: btn.id } });
        setFloors(floors.data);
    }, [btn]);
    // 获取保洁人员信息
    const [cleaners, setCleaners] = useState([]);
    const getCleaners = useCallback(async () => {
        const { data: cleaners } = await request.get('/building/getCleanerTableData', { params: { buildingId: btn.id } });
        setCleaners(cleaners.data.cleaners)
    }, [btn]);
    //分配保洁人员
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [cleanerInfo, setCleanerInfo] = useState({ floorId: '', cleanerId: '' })
    const showModal = useCallback((id) => {//点击回调
        setCleanerInfo({ floorId: id, cleanerId: '' })
        setIsModalVisible(true);
    }, []);
    const handleOk = useCallback(async () => {//确定回调
        const { floorId, cleanerId } = cleanerInfo
        const { data } = await request.post('/floor/addCleanerToFloor', { floorId, cleanerId, });
        if (!data.success) {
            message.warning('分配保洁人员失败');
            return;
        }
        if (data.success) {
            message.success('分配保洁人员成功');
            getFloors();
        }
        setIsModalVisible(false);
    }, [cleanerInfo]);
    const handleCancel = useCallback(() => {//取消回调
        setIsModalVisible(false);
    }, []);
    const distCleaner = useCallback((_, { key }) => {//下拉回调
        setCleanerInfo(pre => ({ floorId: pre.floorId, cleanerId: key }))
    }, [])
    //跳转宿舍信息页
    const goRoomInfo = useCallback(id => {
        return () => {
            props.history.push(`/subject/roomInfo?roomId=${id}`)
        }
    })
    /* */
    useEffect(() => {
        getBuildings();
    }, [])
    return (
        <div className="floorManage">
            <div className="manage">
                <MainTitle>楼层管理</MainTitle>
                <div className="getInfo">
                    <div>
                        <label>宿舍楼</label>
                        <Select onChange={handleChange} placeholder="请选择">
                            {
                                buildings.map(item => {
                                    return <Option value={item.name} key={item.id}>{item.name}</Option>
                                })
                            }
                        </Select>
                    </div>
                    <Button type="primary" shape="round" onClick={getInfo} disabled={btn.disabled}>
                        获取数据
                    </Button>
                </div>
            </div>
            <div className="info">
                <MainTitle>楼层信息</MainTitle>
                <div className="showInfo">
                    {!floors.floors ?
                        <div style={{
                            backgroundColor: '#fff',
                            borderRadius: '5px',
                            padding: '20px',
                            overflow: 'hidden'
                        }}>请选择宿舍楼</div>
                        :
                        <List
                            itemLayout="vertical"
                            size="large"
                            dataSource={floors.floors}
                            renderItem={item => (
                                <div className="item">
                                    <div className="floor">楼层：{item.layer}层</div>
                                    <List.Item
                                        key={item.id}
                                        actions={
                                            item.rooms.map(it => {
                                                return (
                                                    <div key={it.id} className={it.studentCount == 0 ? 'room-itme empty' : (it.studentCount == 6 ? 'room-itme full' : 'room-itme')} onClick={goRoomInfo(it.id)}>
                                                        {it.number}
                                                    </div>
                                                )
                                            })
                                        }
                                        extra={
                                            <div className="cleaner" onClick={() => {
                                                showModal(item.id)
                                            }}>
                                                <div className="cleaner_title">
                                                    保洁人员
                                                </div>
                                                <div className="cleaner_name">
                                                    {
                                                        item.cleaner ? item.cleaner.name : '无'
                                                    }
                                                </div>
                                            </div>
                                        }
                                    >
                                    </List.Item>
                                </div>
                            )}
                        />}
                </div>
            </div>
            <div className='modal'>
                <Modal title="分配保洁人员" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} cancelText="取消" okText="确定" width={400} className="modal_mian">
                    <Select onChange={distCleaner} placeholder="请选择">
                        {
                            cleaners.map((item, index) => {
                                return <Option value={index} key={item.id}>{item.name}</Option>
                            })
                        }
                    </Select>
                </Modal>
            </div>
        </div >
    )
}